<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//menu
$(".printtitle_imageL").find("li").each(function(){
var self=$(this);
    self.click(function(){
        $(".printtitle_imageL").find("li").attr("class","tab_off");
        self.attr("class","tab_on");
        var sh=self.attr("id");
              
        if(sh=="prod_tab")
        {        
          $("#finishes").hide();
          $("#product_image").show();
        }
        else
        {
         $("#product_image").hide();
         $("#finishes").show();
        }
    })
    
})

//select picture
$("#smallfinishes").find("img").each(function(){
 var self=$(this);
  self.mouseover(function(){
    $("#bigfinishes").find("strong").html(self.next("p").html());  
   $("#bigfinishes").find("img").attr("src",self.attr("src"));
    
  })

})

//select picture
$("#smallpicture").find("img").each(function(){
 var self=$(this);
  self.mouseover(function(){
   $("#bigpicture").find("strong").html(self.next("p").html());  
   $("#bigpicture").find("img").attr("src",self.attr("src"));    
  })

})




})
</script>
<style type="text/css">
html{padding:0;margin:0;}
body{font-size:12px;font-family:Helvetica, sans-serif;padding:18px 0 0 0;margin:0;}
.print_body  {
    background-color:#F3F4F8;
    background-position:center top;
    color:#767676;
    font-family:Helvetica,sans-serif,Verdana,Arial;
    font-size:12px;
    line-height:145%;
    width:780px;
}
.print_page{
    background-color:#FFFFFF;
    margin-bottom:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    width:99%;
}
.main_print_page  {
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    width:755px;
}
.print_titlebar2  {
    background-image:url("../css/images/headerbar.jpg");
    background-position:center bottom;
    background-repeat:repeat-x;
    color:#FFFFFF;
    height:30px;
    width:100%;
}
.tab_on {

}
.tab_on{border:solid 3px #BB9006; width:110px;display:block;border-bottom:#fff solid 3px;color:#002C4F;text-decoration:none;background-color:#fff;cursor:pointer; }
.tab_on:hover{border-bottom:2px solid #BB9006;background-color:#BB9006;}
.tab_off{border:solid 2px #BB9006; width:110px;display:block;color:#fff;text-decoration:none;cursor:pointer; }
.tab_off:hover{background-color:#BB9006;color:#002C4F;}
.tab_on, .tab_off{
   
}
.printtitle_imageL{
    float:left;
}
.printtitle_imageL ul{padding:0;margin:0;padding-left:25px;padding-top:8px;}
.printtitle_imageL li
{
  float:left;
  width:110px;
  list-style:none;
  text-align:center; 
  padding:0;
  margin:0 3px 0 0;
  over-flow:hidden;
  height:16px;
  line-height:16px;
}
.clear{clear:both;font-size:0; height:0;}
.small-pic{border:1px solid #ccc;margin-bottom:5px; padding:2px; }
.small-pic img{ width:80px;}

#bigpicture strong{color:#002C4F;font-size:14px;}
#bigfinishes strong{color:#002C4F;font-size:14px;}
#finishes{display:none; }
#product_image {}
.large_title{text-align:center;width:548px;}

.small-pic p{margin:0; padding:5px 0;}
</style>
</head>
<body>	
			<div class="print_page" align="center">
				<div class="print_titlebar2">
					<div class="printtitle_imageL" >   
					    <ul>
					    <li class="tab_on"  id="prod_tab">Product Image</li>
					    <li class="tab_off" id="fin_tab">Finishes Available</li>
					    </ul>               
                
                    </div>
				    <div class="clear"></div>
				    </div>
					<div class="printtitle_imageR"><div class="clear"></div></div>
				</div>
				<div class="clear"></div>
				<div class="print_div_top">
					<div class="breadcrumb" align="left">
					</div>
					<div align="right">
							
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<div class="main_print_page" align="center">			
				                
                <div id="product_image" >
                <table width="100%">
                    <tbody>
                    <tr>
                        <td id="bigpicture" align="center">
                            <img src="../css/images/33402GMLSC-W_l.jpg" id="the_image1" width="548"/>
                            <div class="large_title"><strong id="the_title1">Default Option</strong></div>
                        </td>
                        <td valign="top" width="90">
                        	<div align="center" id="smallpicture">
                        	<div class="small-pic"><img src="../css/images/33402GMLSC-W_l.jpg" width="80" /></div>
                        	<div class="small-pic"><img src="../css/images/home3.jpg" width="80" /></div>
                        	</div>
                        </td>
                    </tr>                    
                </tbody>
                </table>
                </div>
                
                <div id="finishes" >
                <table width="100%">
                    <tbody><tr>
                        <td align="center"> 
                        	<div  id="bigfinishes">   
                            <img src="../css/images/default.jpg" id="the_image2" width="548"> 
                            <div class="large_title"><strong id="the_title2">NWND - New Walnut Distress finish</strong></div>
                            </div>
                        </td>
                         <td valign="top" width="90">
                        	<div align="center" id="smallfinishes">
                        	<div class="small-pic"><img src="../css/images/3287_NWND_tn.JPG" width="80" />
                        	   <p>NWND</p>
                        	</div>
                        	<div class="small-pic"><img src="../css/images/3287_PWH_tn.JPG" width="80" />
                        	 <p>PWH</p>
                        	</div>
                        	</div>
                        </td>
                    </tr>
                </tbody>
                </table> 
               </div>										
			<div class="clear"></div>
				</div>							
          
</body>
</html>